<template>
  <el-dialog
    :title="isEdit?'修改规则':'新增规则'"
    :visible.sync="visible"
    @close="$emit('update:show', false)"
  >
    <el-form label-width="auto" :rules="rules" :model="params" ref="editForm" size="small">
      <el-tabs v-model="activeName">
        <el-tab-pane label="基本信息" name="first">
          <el-form-item label="规则名称" prop="limitName">
            <el-input placeholder="请输入规则名称" v-model="params.limitName"></el-input>
          </el-form-item>
          <el-form-item label="规则类型" prop="limitType">
            <el-select v-model="params.limitType" placeholder="请选择规则类型">
              <el-option
                v-for="item in limitTypeOpts"
                :key="item.value"
                :label="item.label"
                :value="item.value">
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="限制IP/域名" prop="limitIp">
            <el-input type="textarea" placeholder="输入需要限制的IP或者域名" v-model="params.limitIp"></el-input>
            <div class="form-item-tip">
              同时支持Ip和域名,多个用分号";"隔开。示例：192.168.0.1;127.0.0.1;baidu.com
            </div>
          </el-form-item>
          <el-form-item label="备注">
            <el-input type="textarea" placeholder="可输入备注" v-model="params.remark"></el-input>
          </el-form-item>
        </el-tab-pane>
        <el-tab-pane label="控制接口" name="second">
          <api-select-mod ref="apiSelect" @change="authApiChange"></api-select-mod>
        </el-tab-pane>
      </el-tabs>
    </el-form>

    <div slot="footer" class="dialog-footer">
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="saveEdit">保 存</el-button>
    </div>
  </el-dialog>
</template>

<script>
  import ApiSelectMod from '../../common/ApiSelectMod'

  export default {
    name: "AddEditIpimitDialog",
    components: {
      ApiSelectMod
    },
    props: {
      show: {
        type: Boolean,
        default: false
      },
      editData: null
    },
    watch: {
      show() {
        this.visible = this.show;
        if (!this.editData) {
          for (let k in this.params) {
            this.params[k] = '';
          }
          this.params.state = 1;
          this.isEdit = false;
        }
      },
      editData: {
        handler() {
          if (this.editData) {
            // for(let k in this.params){
            //   this.params[k] = this.editData[k]?this.editData[k]:null;
            // }
            this.params.id = this.editData.id;
            this.query();
            this.isEdit = true;
          }
        },
        immediate: true,
        deep: true
      }
    }
    ,
    data() {
      return {
        activeName: 'first',
        visible: this.show,
        isEdit: false,
        params: {
          id: '',
          limitName: '',
          limitType: '',
          limitIp: '',
          remark: '',
          intIds: '',
          state: 1
        },
        intIds: [],
        rules: {
          limitName: [
            {required: true, message: '规则名称不能为空', trigger: 'blur'}
          ],
          limitType: [
            {required: true, message: '规则类型不能为空', trigger: 'blur'}
          ],
          limitIp: [
            {required: true, message: '规则限制不能为空', trigger: 'blur'}
          ]
        },
        limitTypeOpts: [
          {label: '黑名单', value: '2'},
          {label: '白名单', value: '1'}
        ]
      }
    },
    mounted() {

    },
    methods: {
      query() {
        this.api.post('/bucket-system/gateway/iplimit/info', this.params)
          .then((data) => {
            let d = data.data;
            for (let k in this.params) {
              this.params[k] = d[k] ? d[k] : null;
            }
            let intIds = [];
            d.interfaces.forEach((item) => {
              intIds.push(item.id);
            });
            this.params.intIds = intIds.join(',');
            this.$refs.apiSelect.init(intIds);
          });
      },
      saveEdit: function () {
        this.$refs['editForm'].validate((valid) => {
          if (valid) {
            let _url = '';
            if (!this.isEdit) {
              _url = '/bucket-system/gateway/iplimit/add';
            } else {
              _url = '/bucket-system/gateway/iplimit/update';
            }

            this.api.post(_url, this.params)
              .then((data) => {
                if (data.code === 200) {
                  this.visible = false;
                  this.$message({
                    message: '保存成功',
                    type: 'success'
                  });
                  this.$parent.query();
                } else {
                  this.$message.error(data.data);
                }
              });
          } else {
            return false;
          }
        });
      },
      authApiChange(valArr) {
        this.params.intIds = valArr.join(',');
      }
    }
  }
</script>
<style rel="stylesheet/scss" lang="scss">
  .el-drawer__body {
    overflow: auto;
  }
</style>
<style rel="stylesheet/scss" lang="scss" scoped>
  .edit-drawer {

  .demo-drawer__content {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 0 20px 20px 20px;
    overflow: auto;

  form {
    flex-grow: 1;
  }

  .demo-drawer__footer {
    display: flex;

  button {
    flex: 1;
  }

  }
  }
  }

</style>
